<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final GB</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="top-container">
        <img class="subtract-small" src="img/subtract-small.png" alt="subtract-small">
        <img class="subtract-big" src="img/subtract-big.png" alt="">
        <header class="header">
            <div class="header__container center">
                <div class="header__logo-wrp">
                    <a href="#" class="header__logo-link"><img src="img/logo.svg" alt="main-logo"></a>

                </div>
                <nav class="header__top-nav">
                    <ul class="header__nav-list">
                        <li class="headedr__nav-item"><a href="#" class="header__nav-link">Products</a></li>
                        <li class="headedr__nav-item"><a href="#" class="header__nav-link">Pricing</a></li>
                        <li class="headedr__nav-item"><a href="#" class="header__nav-link">FAQ</a></li>
                        <li class="headedr__nav-item"><a href="#" class="header__nav-link">Blog</a></li>
                        <li class="headedr__nav-item"><a href="#" class="header__nav-link">Blog</a></li>
                    </ul>
                </nav>
                <ul class="header__account-list">
                    <li class="header__button-wrp"><button class="header__account-btn">Sign in</button></li>
                    <li class="header__button-wrp"><button class="header__account-btn header__sign-up">Sign Up</button>
                    </li>
                    <li class="header__button-wrp">
                        <button class="header__button--burger">
                            <div class="header__account-btn--burger"></div>
                        </button>
                    </li>
                </ul>
            </div>

        </header>
        <section class="top-content">
            <div class="top-content__wrp center">
                <div class="top-content__text">
                    <p class="top-content__title">Monitor your business on real-time dashboard</p>
                    <p class="top-content__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum
                        nisi
                        aliquet volutpat pellentesque volutpat est. Sapien in etiam vitae nibh nunc mattis imperdiet sed
                        nullam. </p>
                    <button class="top-content__button">Try for free</button>
                </div>
                <div class="top-content__screen">
                    <img class="top-content__main-screen" src="img/top-screen.png" alt="">
                    <img class="top-content__subscreen" src="img/top-subscreen.png" alt="">
                </div>

            </div>
        </section>
    </div>
    <main class="main">
        <section class="main-features center">
            <p class="main-features__title">Main Features</p>
            <h2 class="main-features__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum nisi
                aliquet volutpat pellentesque volutpat est. Sapien in etiam vitae nibh nunc mattis imperdiet sed nullam.
                Vitae et, tortor pulvinar risus pulvinar sit amet. Id vel in nam malesuada.
            </h2>
            <ul class="main-features__adv">
                <li class="main-features__adv-item">
                    <article class="main-features__adv-block">
                        <img src="img/monitoring.svg" alt="monitoring">
                        <div class="">
                            <p class="main-features__card-title">Monitoring 24/7</p>
                            <p class="main-features__card-subtitle">Lorem ipsum dolor sit amet, consectetur adipis
                                cing elit. Elementum nisi aliquet volutpat.</p>
                        </div>
                    </article>
                </li>
                <li class="main-features__adv-item">
                    <article class="main-features__adv-block">
                        <img src="img/widgit.svg" alt="monitoring">
                        <div class="">
                            <p class="main-features__card-title">Widget System</p>
                            <p class="main-features__card-subtitle">Lorem ipsum dolor sit amet, consectetur adipis
                                cing elit. Elementum nisi aliquet volutpat.</p>
                        </div>
                    </article>
                </li>
                <li class="main-features__adv-item">
                    <article class="main-features__adv-block">
                        <img src="img/rocket.svg" alt="monitoring">
                        <div class="">
                            <p class="main-features__card-title">Best Performance</p>
                            <p class="main-features__card-subtitle">Lorem ipsum dolor sit amet, consectetur adipis
                                cing elit. Elementum nisi aliquet volutpat.</p>
                        </div>
                    </article>
                </li>
            </ul>
            <ul class="main-features__data-list">
                <li class="main-features__data-item">
                    <article class="main-features__data-block">
                        <div class="main-features__data-text">
                            <p class="main-features__data-title">Automated Reports
                                & Widget Alerts</p>
                            <p class="main-features__data-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing
                                elit.
                                Elementum nisi aliquet volutpat pellentesque volutpat est. Sapien in etiam vitae nibh
                                nunc
                                mattis imperdiet sed nullam. Vitae et, tortor pulvinar risus pulvinar sit amet.</p>
                        </div>
                        <img src="img/data-reports.png" alt="reports" class="main-features__data-img">
                    </article>
                </li>
                <li class="main-features__data-item">
                    <article class="main-features__data-block">
                        <div class="main-features__data-text">
                            <p class="main-features__data-title">Fully customizable to address your needs</p>
                            <p class="main-features__data-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing
                                elit.
                                Elementum nisi aliquet volutpat pellentesque volutpat est. Sapien in etiam vitae nibh
                                nunc
                                mattis imperdiet sed nullam. Vitae et, tortor pulvinar risus pulvinar sit amet.</p>
                        </div>
                        <img src="img/data-statistic.png" alt="statistic" class="main-features__data-img">
                    </article>
                </li>
                <li class="main-features__data-item">
                    <article class="main-features__data-block">
                        <div class="main-features__data-text">
                            <p class="main-features__data-title">Pre-built Dashboard Templates</p>
                            <p class="main-features__data-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing
                                elit.
                                Elementum nisi aliquet volutpat pellentesque volutpat est. Sapien in etiam vitae nibh
                                nunc
                                mattis imperdiet sed nullam. Vitae et, tortor pulvinar risus pulvinar sit amet.</p>
                        </div>
                        <img src="img/data-dashboard.png" alt="dashboard" class="main-features__data-img">
                    </article>
                </li>
            </ul>
        </section>
        <section class="price">
            <div class="price__wrp center">
                <p class="price__title">Pricing Plans</p>
                <p class="price__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum nisi
                    aliquet
                    volutpat pellentesque volutpat est. </p>
                <ul class="price__list">
                    <li class="price__item">
                        <div class="price__block">
                            <p class="price__block-title">Starter</p>
                            <p class="price__block-subtitle">up to 3 users</p>
                            <p class="price__num"><span>$</span>29</p>
                            <button class="price__block-btn">Order</button>
                        </div>
                    </li>
                    <li class="price__item">
                        <div class="price__block">
                            <p class="price__block-title">Standard</p>
                            <p class="price__block-subtitle">up to 20 users</p>
                            <p class="price__num"><span>$</span>99</p>
                            <button class="price__block-btn">Order</button>
                        </div>
                    </li>
                    <li class="price__item">
                        <div class="price__block">
                            <p class="price__block-title">Premium</p>
                            <p class="price__block-subtitle">up to 200 users</p>
                            <p class="price__num"><span>$</span>299</p>
                            <button class="price__block-btn">Order</button>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <section class="trust-form center">
            <ul class="trust-form__wrp">
                <li class="trust-form__item trust-form__trust">
                    <div class="trust">
                        <p class="trust__title">See why the world’s best companies use Analytics</p>
                        <p class="trust__by">Trusted by</p>
                        <ul class="trust__img-wrp">
                            <li><img src="img/accenture-4.svg" alt="accenture" class="trust__icon"></li>
                            <li><img src="img/react.svg" alt="react" class="trust__icon"></li>
                            <li><img src="img/airbnb.svg" alt="airbnb" class="trust__icon"></li>
                            <li><img src="img/sky-4.svg" alt="sky" class="trust__icon"></li>
                        </ul>
                    </div>
                </li>
                <li class="trust-form__item trust-form__item--form-bcg">
                    <div class="form">
                        <p class="form__title">Sign Up</p>
                        <form class="form__block" action="index.html">
                            <button class="form__btn" type="submit">Start your free trial</button>
                            <input type="email" placeholder="Your primary email" required>
                            <input id="pass" type="password" placeholder="Password" required>
                            <input id="re-pass" type="password" placeholder="Re-type Password" required>
                        </form>
                        <p class="form__help-us">Help us get better</p>
                        <div class="rating-area">
                            <input type="radio" id="star-5" name="rating" value="5">
                            <label for="star-5" title="Оценка «5»"></label>
                            <input type="radio" id="star-4" name="rating" value="4">
                            <label for="star-4" title="Оценка «4»"></label>
                            <input type="radio" id="star-3" name="rating" value="3">
                            <label for="star-3" title="Оценка «3»"></label>
                            <input type="radio" id="star-2" name="rating" value="2">
                            <label for="star-2" title="Оценка «2»"></label>
                            <input type="radio" id="star-1" name="rating" value="1">
                            <label for="star-1" title="Оценка «1»"></label>
                        </div>
                        <div class="trust-form__line"></div>
                        <p class="trust-form__login">Already have an account? <a class="trust-form__login--link"
                                href="#">Login</a></p>
                    </div>
                    <div class="form__pink-bcg"></div>
                </li>
            </ul>
        </section>
    </main>
    <footer class="footer">
        <div class="footer__container center">
            <div class="footer__logo-wrp">
                <a href="#" class="header__logo-link"><img src="img/footer-logo.svg" alt="footer-logo"></a>

            </div>
            <nav class="footer__top-nav">
                <ul class="footer__nav-list">
                    <li class="footer__nav-item"><a href="#" class="footer__nav-link">Products</a></li>
                    <li class="footer__nav-item"><a href="#" class="footer__nav-link">Pricing</a></li>
                    <li class="footer__nav-item"><a href="#" class="footer__nav-link">FAQ</a></li>
                    <li class="footer__nav-item"><a href="#" class="footer__nav-link">Blog</a></li>
                    <li class="footer__nav-item"><a href="#" class="footer__nav-link">Blog</a></li>
                </ul>
            </nav>
            <ul class="footer__social-list">
                <li class="footer__social-item">
                    <a href="#"><img src="img/Facebook.svg" alt="facebook"></a>
                </li>
                <li class="footer__social-item">
                    <a href="#"><img src="img/Twitter.svg" alt="twitter"></a>
                </li>
                <li class="footer__social-item">
                    <a href="#"><img src="img/Instagram.svg" alt="instagram"></a>
                </li>
            </ul>
        </div>
    </footer>

    <script src="script.js"></script>
</body>

</html>